<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="utf-8">
	<!--字体图标-->
	<link href="../../javaex/pc/css/icomoon.css" rel="stylesheet" />
	<!--动画-->
	<link href="../../javaex/pc/css/animate.css" rel="stylesheet" />
	<!--骨架样式-->
	<link href="../../javaex/pc/css/common.css" rel="stylesheet" />
	<!--皮肤（缇娜）-->
	<link href="../../javaex/pc/css/skin/tina.css" rel="stylesheet" />
	<!--jquery，不可修改版本-->
	<script src="../../javaex/pc/lib/jquery-1.7.2.min.js"></script>
	<!--全局动态修改-->
	<script src="../../javaex/pc/js/common.js"></script>
	<!--核心组件-->
	<script src="../../javaex/pc/js/javaex.min.js"></script>
	<!--表单验证-->
	<script src="../../javaex/pc/js/javaex-formVerify.js"></script>
	<title>后台管理</title>
</head>

<body>
<!--主体内容-->
<div class="list-content">
	<!--块元素-->
	<div class="block">
		<!--页面有多个表格时，可以用于标识表格-->
		<h2>用户列表</h2>
		<!--右上角的返回按钮-->
		<a href="javascript:history.back();">
			<button class="button indigo radius-3" style="position: absolute;right: 20px;top: 16px;"><span class="icon-arrow_back"></span> 返回</button>
		</a>

		<!--正文内容-->
		<div class="main">
			<!--表格上方的搜索操作-->
			<div class="admin-search">
				<div class="input-group">
					<input id="keyword" type="text" class="text" placeholder="搜索用户名或者昵称" />
					<button id="searchBtn" class="button blue" onclick="search();">搜索</button>
				</div>
			</div>
			<table id="table" class="table color2">
				<thead>
				<tr align="center">
					<th>序号</th>
					<th>头像</th>
					<th>昵称</th>
					<th>用户名</th>
					<th>生日</th>
					<th>电话</th>
					<th>邮箱</th>
					<th>地址</th>
					<th>可借数量</th>
					<th>身份</th>
					<th>操作</th>
				</tr>
				</thead>
				<tbody id="tbody">
				</tbody>
			</table>

			<div class="page">
				<ul id="page" class="pagination"></ul>
			</div>
		</div>
	</div>
</div>


<script>
    // 页面一加载, 展示数据列表, 每页10条
    $(document).ready(function(){
        // 默认查询所有
        rander(1,"",10);
    });

    // 渲染数据表格
    function rander(currPage,keyword,pageSize) {
        // 定义全局 分页属性
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "/user/list",
            //数据，json字符串
            data : JSON.stringify({"currPage":currPage,"keyword": keyword,"pageSize": pageSize}),
            //请求成功
            success : function(result) {
                console.log(result);
                // 获取集合属性
                var r = result.data;
                var total = r.total;
                var currPage = r.currPage;
                var pageSize = r.pageSize;
                // 分页信息
                console.log("currPage:"+r.currPage+"pageSize:"+r.pageSize+"total:"+r.total);

                var array = r.list;
                var text = "";
                $.each(array,function(index,value){
                    console.log(value);
                    var num = pageSize * (currPage - 1) + index + 1;
                    text+= "<tr align='center'><td>"+num+"</td><td><img src='/photo/view?filename="+value.avatar+"'/></td><td>"+value.nickname+"</td><td>"+value.username+"</td><td>"+value.birth+"</td>" +
                        "<td>"+value.tel+"</td><td>"+value.email+"</td><td>"+value.address+"</td><td>"+value.size+"</td>" +
                        "<td>"+value.ident+"</td><td>"+
                        "<button class='button yellow empty' onclick='delUser("+value.id+")'>删除</button></td></tr>";
                });

                $("#tbody").html(text);

                // 向上取整去总页数
                var totalPage = Math.ceil(total/pageSize);
                console.log("totalPage:"+totalPage);
                // 清空分页组件
                $("#page").empty();
                // 调用分页组件
                javaex.page({
                    id : "page",
                    pageCount : totalPage,	// 总页数
                    currentPage : currPage,// 默认选中第几页
                    perPageCount : pageSize ,	// 每页显示多少条，不填时，不显示该条数选择控件
                    isShowJumpPage : false,	// 是否显示跳页
                    totalNum : total,		// 总条数，不填时，不显示
                    position : "center",
                    callback : function(rtn) {
                        // 翻页
                        rander(rtn.pageNum,keyword,rtn.perPageCount);
                    }
                });
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }

    // 搜索
    function search() {
        // 获取搜索关键字
        var keyword = $("#keyword").val();
        // 搜索结果渲染表格
        rander(1,keyword,10);
    }


    // 删除
    function delUser(id) {
        console.log("delete reader"+id);
        javaex.confirm({
            content : "确定要删除么",
            callback : "delCallback("+id+")"
        });
    }

    function delCallback(id) {
        // ajax
        $.get("/user/delete",{"id": id},
            function(data){
                var code = data.code;
                if (code == 200) {
                    javaex.message({
                        content : "删除成功",
                        type : "success"
                    });

                    // 删除成功刷新页面
                    setTimeout(function(){window.location.reload();},1500)

                }
            });

    }
</script>
</body>
</html>